<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable= no, minimum-scale=1, maximum-scale=1">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/template.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="swiper/dist/css/swiper.min.css">
    <title>职业信用管理系统——诚信是文化，信用是基石啊</title>
    <link rel="Shortcut Icon" ng-href="img/logo.png" href="img/logo.png">
    <script type="text/javascript">
        _winWidth = document.body.clientWidth || document.documentElement.clientWidth;
        _style = document.getElementsByTagName("html")[0].style;
        _winWidth = _winWidth >= 960 ? _style.fontSize = "100px" : _winWidth;
        _style.fontSize = _winWidth / 9.60 + "px";
    </script>
</head>

<body>
    <script src="layui/layui.js"></script>
    <script src="swiper/dist/js/swiper.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script>
        layui.config({
            version: false,
            debug: false,
            base: 'layui/modules/'
        }).use('global'); //加载入口
    </script>

    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;
        });
    </script>

    <!--轮播图-->
    <div class="swiper-container">
        <!--标题栏，固定在上方-->
        <div class="navbar-fixed-top">
            <div class="navbar">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md3 navbar-logo">
                        <a href="index.html"><img src="img/logo_title.png"></a>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md5">
                        <ul class="layui-nav" lay-filter="">
                            <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
                            <li class="layui-nav-item"><a href="product.html">产品</a></li>
                            <li class="layui-nav-item"><a href="server.html">服务</a></li>
                            <li class="layui-nav-item"><a href="partners.html">入驻伙伴</a></li>
                            <li class="layui-nav-item"><a href="about_us.html">关于我们</a></li>
                        </ul>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                        <ul class="layui-nav" lay-filter="">
                            <li class="layui-nav-item">
                                <a href="javascript:;">注册职信</a>
                                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                                    <dd><a href="signup_user.html">个人注册</a></dd>
                                    <dd><a href="signup_company.html">企业注册</a></dd>
                                </dl>
                            </li>
                            <li class="layui-nav-item"><a href="login.html">登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background:url(img/slid-one-bg.png) center center no-repeat #6670f1">
                <div class="swiper-block1">
                    <img src="img/slid-one.png" style="width: 35rem; height: 30rem">
                </div>
                <div class="swiper-block1">
                    <div class="swiper-content">
                        <p>从0到1</p>
                        <p>缔造极致产品与用户体验</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" style="background: #fc8d58">
                <div class="swiper-block2">
                    <div class="swiper-content">
                        <p>职业信用驱动商业变革</p>
                    </div>
                </div>
                <div class="swiper-block2">
                    <img src="img/slid-two.png" style="width: 35rem; height: 30rem">
                </div>
            </div>
            <div class="swiper-slide" style="background:url(img/slid-three-bg.png) center center no-repeat #6670f1">
                <div class="swiper-block1">
                    <img src="img/slid-three.png" style="width: 35rem; height: 30rem">
                </div>
                <div class="swiper-block1">
                    <div class="swiper-content">
                        <p>让梦想照进现实</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" style="background:url(img/slid-four-bg.png) center center no-repeat #6670f1">
                <div class="swiper-block2">
                    <div class="swiper-content">
                        <p>让仰望星空的人看的更远</p>
                    </div>
                </div>
                <div class="swiper-block2">
                    <img src="img/slid-four.png" style="width: 35rem; height: 30rem">
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

    <section class="block-container">
        <div class="block block-1">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6 block-img-1">

                    </div>
                    <div class="layui-col-md6">
                        <span>个人效益“加速器”</span>
                        <p>诚信是文化，信用是基石。<br/>
                            定量分析数据，用信用创造价值。</p>
                        <a href="product.html">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="block block-2">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <span>企业效益“加速器”</span>
                        <p>关注员工成长，提升企业工作效率。<br/>
                            职信就是您身边的人力资源管家，为您谋得人中之才。</p>
                        <a href="product.html">了解更多</a>
                    </div>
                    <div class="layui-col-md6 block-img-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="block block-3">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6 block-img-3">

                    </div>
                    <div class="layui-col-md6">
                        <span>社会效益“加速器”</span>
                        <p>建立新型的职业信用档案，以道德为支撑，<br/>
                            以法律为基础，以市场为主体，以互联网为载体，<br/>
                            推动和谐社会的构建，促进社会主义市场经济健康发展。</p>
                        <a href="product.html">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

        <footer>
            <div class="footer-container">
                <div class="footer-top  layui-container">
                    <div class="layui-col-md3">
                        <span>快速通道</span>
                        <a>快速通道</a>
                        <a>快速通道</a>
                        <a>快速通道</a>
                    </div>
                    <div class="layui-col-md3">
                        <span>快速通道</span>
                        <a>快速通道</a>
                        <a>快速通道</a>
                        <a>快速通道</a>
                    </div>
                    <div class="layui-col-md3">
                        <span>快速通道</span>
                        <a>快速通道</a>
                        <a>快速通道</a>
                        <a>快速通道</a>
                    </div>
                    <div class="layui-col-md3 footer-contact">
                        <p>0573-88888888</p>
                        <span>周一至周日8:00-20:00</span>
                        <a href="signup_user.html">加入我们</a>
                    </div>
                </div>
                <div class="footer-bottom  layui-container">
                    职信&copy2018 All Rights Reserved
                </div>
            </div>
        </footer>




    <script>
        var swiper = new Swiper('.swiper-container', {
            centeredSlides: true,
            spaceBetween: 30,
            effect: 'fade',
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        });

        // 滚动到一定位置-导航栏变色
        $(document).ready(function(){
            $(window).scroll(function() {
                var top = $(".swiper-content").offset().top; //获取指定位置
                var scrollTop = $(window).scrollTop();  //获取当前滑动位置
                if(scrollTop > top){                 //滑动到该位置时执行代码
                    $(".navbar-fixed-top").addClass("active");
                }else{
                    $(".navbar-fixed-top").removeClass("active");
                }
            });
        });
    </script>
</body>
</html>
